<template>
	<view class="goods-collects" :class="themeName">
		<mescroll-contain top="20rpx" ref="collect" :up-option="upOpt" @upcallback="upCallback">
			<view>
				<view class="collect" v-for="(item, index) in collectList" :key="item.goods_id">
					<u-swipe-action :show="item.show" :index="index" :key="item.goods_id" @click="swipeClick"
						@open="swipeOpen" :options="swipeOptions" style="width: 100%;">
						<goods-card shape="rectangle" :name="item.name" :image="item.image"
							:contain-style="{ 'border-raius': 0, 'height': '200rpx' }"
							:image-style="{ 'width': '160rpx', 'height': '160rpx' }">
							<text class="muted xs">{{ item.spec_value_str }}</text>
							<view class="m-t-10 flex row-between">
								<price :content="item.min_price" mainSize="32rpx" minorSize="24rpx" :color="themeColor"
									:prefix="price_symbol" />
								<template v-if="item.status">
									<view class="collect-button collect-button--normal"
										@click="goGoodsDetail(item.goods_id)">{{$zhTran('去购买')}}</view>
								</template>
								<template v-else>
									<view class="collect-button collect-button--muted">{{$zhTran('已失效')}}</view>
								</template>
							</view>
						</goods-card>
					</u-swipe-action>
				</view>
			</view>
			<w-jishuzhichi :class="[{'jishuzhichi-nodata':collectList.length == 0}]" />
		</mescroll-contain>
	</view>
</template>


<script>
	import {
		apiGoodsCollect,
		apiGoodsCollectList
	} from '@/api/goods'
	import Cache from '@/utils/cache'

	let mescroll = null

	export default {
		name: 'GoodsCollects',

		data() {
			return {
				collectList: [], // 收藏列表
				swipeOptions: [{
					text: this.$zhTran('删除'),
					style: {
						backgroundColor: '#FF2C3C'
					}
				}],
				upOpt: {
					noMoreSize: 10,
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/collect.png'),
						tip: this.$zhTran('暂无收藏~'),
						fixed: true
					}
				},
				price_symbol: '￥'
			}
		},

		mounted() {
			mescroll = this.$refs['collect']
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},

		methods: {
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiGoodsCollectList({
					page_no: num,
					page_size: size,
					clsp_id: Cache.get('clsp_id')
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					lists.forEach(item => item.show = false)
					if (num === 1) this.collectList = []
					this.collectList = [...this.collectList, ...lists]
					this.collectList = this.$zhTran(this.collectList)
					// mescroll.endBySize(page_size, count)
					mescroll.endSuccess(lists.length, count)
					this.price_symbol = extend.price_symbol
				}).catch(err => {
					mescroll.endErr()
				})
			},

			// 去商品详情
			goGoodsDetail(goods_id) {
				this.$Router.push({
					path: '/bundle2/pages/goods_detail/goods_detail',
					query: {
						id: goods_id
					}
				})
			},

			// 点击滑动操作Options
			swipeClick(collectIndex, optionIndex) {

				if (optionIndex == 0) {
					const collectItem = this.collectList[collectIndex]
					collectItem.show = false

					this.handleCollectDel(collectItem.goods_id)
				}
			},

			// 关闭其他Options
			swipeOpen(index) {
				this.collectList[index].show = true
				this.collectList.map((val, idx) => {
					if (index != idx) this.collectList[idx].show = false
				})
			},

			// 取消收藏
			handleCollectDel(id) {
				apiGoodsCollect({
					goods_id: id,
					is_collect: 0,
				}).then(() => {
					mescroll.downCallback()
				}).catch(err => {
					console.log(err)
				})
			}
		},

	}
</script>


<style lang="scss" scoped>
	.collect {
		position: relative;

		&:nth-child(n+2)::after {
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			content: "";
			width: calc(100% - 160rpx - 20rpx * 2);
			border-top: $-solid-border;
		}


		&-button {
			box-sizing: border-box;
			padding: 8rpx 30rpx;
			font-size: $-font-size-sm;
			border-radius: 60px;

			&--normal {
				border-width: 1px;
				border-style: solid;
				@include font_color();
				@include border_color();
			}

			&--muted {
				color: $-color-lighter;
				background-color: #F2F2F2;
			}
		}
	}
</style>